<template>
  <view class="FormItem class">
    <XImage class="Icon" v-if="icon" :src="icon" :style="{ width: iconSize }" />
    <text :style="{ width: labelWidth || '' }" class="Label">
      {{ label }}：
    </text>
    <view class="FormContent">
      <slot />
    </view>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import XImage from '@/components/XImage.vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {
    XImage,
  },
  props: {
    icon: {
      type: String,
      default: '',
    },
    iconSize: {
      type: String,
      default: '14px',
    },
    label: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: String,
      default: '',
    },
  },
  methods: {},
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.FormItem {
  display: flex;
  align-items: center;

  .Icon {
    margin: 4px;
  }

  .Label {
    color: #888;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: right;
  }

  .FormContent {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
    display: flex;
  }
}
</style>
